<template>
    <div class="zhubo">
        <h2 style="text-align: center;">这是主播页面</h2>
        <input type="button" title="开启摄像头" value="开启摄像头" @click="getMedia()"/>
        <input type="button" title="开启屏幕共享" value="开启屏幕共享" @click="getPing()"/>
        <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
        <canvas id="canvas" width="500px" height="500px"></canvas>
        <button @click="start()">开始直播</button>
        <button @click="stop()">停止直播</button>
    </div>
</template>

<script>
export default {
    data () {
        return {
            interval: null,
            video: null,
            canvas: null,
            ctx: null,
            socket: null
        }
    },
    mounted () {
        this.video = document.getElementById("video")
        this.canvas = document.getElementById("canvas")
        this.ctx = this.canvas.getContext('2d')
        // 创建对话
        this.socket = new WebSocket("ws://localhost:15000/eat-service/v?video");
        //打开socket

        this.socket.onopen = function () {
            console.log("open success")
        }

        //接收到消息的回调方法
        this.socket.onmessage = function (event) {
            console.log(event)
        }

        //连接关闭的回调方法
        this.socket.onclose = function () {
            console.log("close");
        }
    },
    methods: {
        // 开启摄像头
        getMedia () {
            var constraints = {
                video: { mediaSource: 'screen' } 
            };
            /*
            这里介绍新的方法:H5新媒体接口 navigator.mediaDevices.getUserMedia()
            这个方法会提示用户是否允许媒体输入,(媒体输入主要包括相机,视频采集设备,屏幕共享服务,麦克风,A/D转换器等)
            返回的是一个Promise对象。
            如果用户同意使用权限,则会将 MediaStream对象作为resolve()的参数传给then()
            如果用户拒绝使用权限,或者请求的媒体资源不可用,则会将 PermissionDeniedError作为reject()的参数传给catch()
            */
            // 使用 H5新媒体navigator.mediaDevices.getUserMedia()接口连接相机
            var promise = navigator.mediaDevices.getUserMedia(constraints);
            var that = this
            promise.then(function (MediaStream) {
                console.log(MediaStream)
                that.video.srcObject = MediaStream
                that.video.play()
            }).catch(function (PermissionDeniedError) {
                console.log(PermissionDeniedError);
            })
            
        },
        getPing () {
            var constraints = {
                video: {width: 500, height: 500},
                audio: false
            };
            /*
            这里介绍新的方法:H5新媒体接口 navigator.mediaDevices.getUserMedia()
            这个方法会提示用户是否允许媒体输入,(媒体输入主要包括相机,视频采集设备,屏幕共享服务,麦克风,A/D转换器等)
            返回的是一个Promise对象。
            如果用户同意使用权限,则会将 MediaStream对象作为resolve()的参数传给then()
            如果用户拒绝使用权限,或者请求的媒体资源不可用,则会将 PermissionDeniedError作为reject()的参数传给catch()
            */
            // 使用 H5 navigator.mediaDevices.getDisplayMedia()实现屏幕共享
            var promise = navigator.mediaDevices.getDisplayMedia(constraints);
            var that = this
            promise.then(function (MediaStream) {
                console.log(MediaStream)
                that.video.srcObject = MediaStream
                that.video.play()
            }).catch(function (PermissionDeniedError) {
                console.log(PermissionDeniedError);
            })
            
        },
        // 开始直播
        start () {
            var that = this
            this.interval = window.setInterval(function () {
                that.ctx.drawImage(that.video, 0, 0, 500, 500);
                that.socket.send(that.canvas.toDataURL("image/jpeg", 0.5));
            }, 60);
        },
        // 停止直播
        stop () {
            clearInterval(this.interval)
        }
    }
}
</script>

<style>

</style>